import 'package:flutter/material.dart';

/// 编辑器左侧固定宽度的侧边栏。
///
/// 仅负责：
/// - 显示资源管理器按钮与输出面板按钮；
/// - 根据 [showExplorer] / [showOutput] 状态高亮按钮；
/// - 点击按钮时调用对应回调 [onToggleExplorer] / [onToggleOutput]；
/// - 宽度由 [width] 控制，默认为 48。
class EditorSidebar extends StatelessWidget {
  const EditorSidebar({
    super.key,
    required this.showExplorer,
    required this.onToggleExplorer,
    required this.showOutput,
    required this.onToggleOutput,
    this.width = 48,
  });

  /// 当前是否显示资源管理器（控制按钮选中态）。
  final bool showExplorer;

  /// 当前是否显示输出面板（控制按钮选中态）。
  final bool showOutput;

  /// 点击“资源管理器”按钮时触发的回调。
  final VoidCallback onToggleExplorer;

  /// 点击“输出”按钮时触发的回调。
  final VoidCallback onToggleOutput;

  /// 侧边栏宽度，默认 48。
  final double width;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return Container(
      width: width,
      // 背景色：随主题调整，弱化处理
      color: colorScheme.surfaceContainerHighest.withOpacity(0.2),
      child: Column(
        children: [
          // 顶部分割线
          Container(
            height: 0.8,
            color: colorScheme.outlineVariant.withOpacity(0.2),
          ),
          const SizedBox(height: 8),

          // —— 资源管理器按钮（固定在上方）
          Tooltip(
            message: 'File Explorer',
            child: IconButton.filledTonal(
              isSelected: showExplorer,
              selectedIcon: const Icon(Icons.folder_open),
              icon: const Icon(Icons.folder_open),
              style: IconButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                padding: const EdgeInsets.all(6),
                minimumSize: const Size(36, 36),
              ),
              onPressed: onToggleExplorer,
            ),
          ),

          const Spacer(),

          // —— 输出面板按钮（固定在底部）
          Tooltip(
            message: 'Output',
            child: IconButton.filledTonal(
              isSelected: showOutput,
              selectedIcon: const Icon(Icons.play_arrow),
              icon: const Icon(Icons.play_arrow_outlined),
              style: IconButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                padding: const EdgeInsets.all(6),
                minimumSize: const Size(36, 36),
              ),
              onPressed: onToggleOutput,
            ),
          ),
          const SizedBox(height: 8),
        ],
      ),
    );
  }
}
